<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>高阶函数_函数柯里化</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      //#region
      /* 
					高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
									1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
									2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
									常见的高阶函数有：Promise、setTimeout、arr.map()等等

					函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 
						function sum(a){
							return(b)=>{
								return (c)=>{
									return a+b+c
								}
							}
						}
					*/
      //#endregion
      //创建组件
      class Login extends React.Component {
        //初始化状态
        state = {
          username: '', //用户名
          password: '', //密码
        }

        //保存表单数据到状态中
        // 在节点中使用函数时，加不加（）的区别时：将函数作为回调和将返回值作为回调传入
				// 高阶函数，函数柯里化
        saveFormData = (dataType) => {
          // 在这部分可以使用switch(){}case语句来对输入的值进行正则表达式的验证
					
          return (event) => {
						// 注意这里的[],联想下标为字符串的数组
            this.setState({ [dataType]: event.target.value })
          }
        }

        //表单提交的回调
        handleSubmit = (event) => {
          event.preventDefault() //阻止表单提交
          const { username, password } = this.state
          alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
        }
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              用户名：
              <input
                onChange={this.saveFormData('username')}
                type="text"
                name="username"
              />
              密码：
              <input
                onChange={this.saveFormData('password')}
                type="password"
                name="password"
              />
              <button>登录</button>
            </form>
          )
        }
      }
      //渲染组件
      ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
  </body>
</html>
